<template>
  <div style="position: relative; height: 100vh; width: 100%;">
<!-- 	 <div id="yjqd">
	 		一键启动
	 </div> -->
	 
	 <div class="hader">
	 	<div class="hader-info">
	 		<div class="hader-item">
	 			<div>续航里程</div>
	 			<div>{{carInfo.enduranceMileage}}</div>
	 		</div>
	 		<div class="hader-item">
	 			<div>剩余电量</div>
	 			<div>{{carInfo.dumpEnergy}}</div>
	 		</div>
	 	</div>
		<canvas ref="myCanvas" style="width: 100%;height: 450px;"></canvas>
	 </div>
	 
	 <div id="server">
	 	<div class="server-item">
	 		<img src="../assets/control/firing.png" >
			<div class="text">
				车锁
			</div>
	 	</div>
		<div class="server-item">
			<img src="../assets/closeWindow.png" >
			<div class="text">
				车窗
			</div>
		</div>
		<div class="server-item">
			<img src="../assets/closeTrunk.png" >
			<div class="text">
				后备箱
			</div>
		</div>
		<div class="server-item">
			<img src="../assets/control/rescue.png" >
			<div class="text">
				闪灯鸣笛
			</div>
		</div>
		<div class="server-item">
			<img src="../assets/control/whistle.png" >
			<div class="text">
				闪滴
			</div>
		</div>
	 </div>
	  
    <van-tabbar v-model="active" route>
        <van-tabbar-item>
            <span>首页</span>
            <template slot="icon">
            <img src="@/assets/tabbar/community.png" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item>
            <span>数据分析</span>
            <template slot="icon">
            <img src="@/assets/tabbar/analysis.png" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home">
			<span>爱车</span>
            <template slot="icon">
            <img src="@/assets/tabbar/home.png" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/serve">
            <span>服务</span>
            <template slot="icon">
            <img src="@/assets/tabbar/service.png" />
            </template>
        </van-tabbar-item>
        <van-tabbar-item to="/mine">
            <span>我的</span>
            <template slot="icon">
                <img src="@/assets/tabbar/mine.png" />
            </template>
        </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
	import * as THREE from 'three';
	import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
	import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
	import ajax from '../util/request.js'
export default {
  name: 'home',
  data() {
    return {
      active: '/home',
	  carInfo:{}
    }
  },
  methods:{
	  //模型三要素：相机，容器 光源
	  getThree(){
		  //创建场景
		  const scene = new THREE.Scene();
		  const width=this.$refs.myCanvas.clientWidth
		  const hight=this.$refs.myCanvas.clientHeight
		  //创建相机
		  const camera = new THREE.PerspectiveCamera( 1, width/ hight, 0.1, 10000 );
		  //初始化相机位置
		  camera.position.set(1,1,1)
		  scene.add(camera)
		  //初始化光源
		  let light=new THREE.DirectionalLight(0xffffff, 1)
		  light.position.set(1,1,1)
		  scene.add(light)
		  //环境光
		  let ambientLight=new THREE.AmbientLight(0xffffff, 1)
		  scene.add(ambientLight)
		  //创建渲染器
		  let renderer=new THREE.WebGLRenderer({
			canvas:this.$refs.myCanvas,
			alpha:true
		  })
		  renderer.setSize(width,hight)
		  //加载模型
		  let loader= new GLTFLoader()
		  loader.load('https://web-tilasjjh.oss-cn-hangzhou.aliyuncs.com/tesla.glb',(res)=>{
			  scene.add(res.scene)
		  })
		  renderer.render(scene,camera)
		  //轨道控制器
		  let controls= new OrbitControls(camera,renderer.domElement)
		 //创建动画
		 function am(){
			 requestAnimationFrame(am)
			 controls.update()
			 renderer.render(scene,camera)
		 }
		 am()
		  
	  },getCarInfo(){
		 let carId= JSON.parse(window.localStorage.getItem('userInfo')).car.carId
		  ajax({
			  url:"/dev-api/bs-vehicle-owner/carInfo/getByCarId/"+carId,
		  }).then(res=>{
			  console.log(res.data)
			  this.carInfo=res.data
		  })
	  }
  },
  mounted() {
  	this.getThree()
	this.getCarInfo()
  }
};
</script>

<style>
	#yjqd{
		align-items: center;
		border: 1px #888 solid;
		height: 100px;
		width: 100px;
		border-radius: 50%;
		font-size: 18px;
		align-items: center;
		line-height: 100px;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 10px rgba(0,0,0, 0.4);
		}
		.hader-info{
			display: flex;
			font-size: 20px;
			justify-content: space-around;
		}
		.hader{
			  /* background: linear-gradient(0deg, #ffffff 0%, #faf5ff 50%, #f5f3ff 100%); */
			  background: linear-gradient(0deg, #ffffff 0%, #c8f0dc 40%, #78c8d2, 80%, #0796af 100%);
			 color: white;
			 height: 70%;
		}
		#server{
			display: flex;
			justify-content: space-around;
			font-size: 18px;
		}
		.server-item img{
			width: 40px;
			height: 40px;
		}
</style>